 

<template>
    <tm-app class="createCircle newCircle">


        <view class="topBg"></view>

        <view style="position:fixed;top:0;width:750rpx;z-index:1000;" class="needChangeBg" :class="{active:transFormHeight}" :style="{height: systemInfo.statusBarHeight + 'px'}"></view>


        <view class="slim_header d-flex a-center j-center needChangeBg"  style="z-index:1000;background:transparent;border-bottom:none;" :class="{active:transFormHeight}"  :style="{top: systemInfo.statusBarHeight + 'px'}">
				<view class="left_box" @tap="goBack">

					<image v-if="currentStep==='step1'" src="/static/center/back.png" class="back"></image>
                    <text v-else class="stepText">上一步</text>
				</view>
				<view class="title">{{titleText}}</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
		</view>



        <view class="content1" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)`,transform: `translateY(-${transFormHeight}px)` }">

            <view class="step_box d-flex a-center j-center" >
                    <view class="step step1 d-flex d-c a-center j-center active">
                        <view class="dot d-flex a-center j-center">1</view>
                        <view class="text">基础信息</view>
                    </view>
                    <view class="line" :class="{active:currentStep!=='step1'}"></view>
                    <view class="step step2 d-flex d-c a-center j-center" :class="{active:currentStep!=='step1'}">
                        <view class="dot d-flex a-center j-center">2</view>
                        <view class="text">详细信息</view>
                    </view>
                    <view class="line" :class="{active:currentStep==='step3'}"></view>
                    <view class="step step3 d-flex d-c a-center j-center" :class="{active:currentStep==='step3'}">
                        <view class="dot d-flex a-center j-center">3</view>
                        <view class="text">完成上传</view>
                    </view>
        </view>
            <scroll-view class="scr scr1" :class=[currentStep] :scroll-y="true" >

                <view class="box_main" style="margin-top:20rpx;">
                    <view class="title_main d-flex a-center">
                        你要创建一个什么类型的群呢？
                    </view>

                    <view class="tags d-flex a-center wrap" style="margin-top:20rpx;">
                        <view v-for="tag in systemConfig.groupTag" class="check_tag d-flex a-center j-center"
                            :class="{ checked: selectedTag === tag.slimKey }" @tap="handleCheckTag(tag)">
                            <i class="icon" :class="[getClass(tag.slimKey)]"></i>
                            <text class="text">{{ tag.slimValue }}</text>
                            <image v-if="selectedTag === tag.slimKey" class="selectedBg" src="/static/createCircle/bg1.png" mode="" />
                        </view>
                    </view>
                </view>
                <view class="box_main" style="margin-top:20rpx;">
                    <view class="title_main">
                        作为群主，您将提供给其他群友什么样的帮助?（多选）
                    </view>
                    <view class="service d-flex wrap" style="margin-top:20rpx;">
                        <view class="card d-flex d-c j-center a-center" v-for="item in systemService"
                            :class="{ checked: service.includes(item.id) }" @tap="selectService(item)">
                            <view class="rect d-flex a-center j-center" :class="{
                                newService: !baseService.includes(
                                    item.photo
                                ),
                            }">
                                <image v-show="service.includes(item.id)" class="img"
                                    :src="`/static/createCircle/${item.photo}-w.png`"></image>
                                <image v-show="!service.includes(item.id)" class="img"
                                    :src="`/static/createCircle/${item.photo}-h.png`"></image>
                            </view>
                            <view :class="{newServiceText: !baseService.includes(
                                    item.photo
                                )}"  class="text psr">
                                {{ item.title }}
                            </view>
                        </view>
                        <view class="card d-flex d-c j-center a-center" v-if="systemService.length<12" @tap="goAddService">
                            <view class="rect add d-flex a-center j-center">
                                <i class="tmicon tmicon-plus" style="color: #F19945; font-size: 50rpx"></i>
                            </view>
                            <view class="text d-flex psr newServiceText">添加自定服务</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <scroll-view class="scr scr2" :class=[currentStep] :scroll-y="true">
                <view class="box_main" style="margin-top:20rpx;">
                    <view class="title_main d-flex a-center">
                        想要创建一个容纳多少胖友的群？
                    </view>
                    <view class="userNumPicker d-flex">
                        <view class="card d-flex a-center j-center" v-for="item in userCountArr" :class="{active:item.num===maxUserCount}"  @tap="maxUserCountPicker(item)">
                            <text class="text">
                                <text class="num">{{item.num}}</text>
                                <text class="ren">人</text>
                            </text>
                            <image v-if="item.needVip===1&&item.num!==maxUserCount" class="vip" src="/static/createCircle/vip-dark.png"></image>
                            <image v-if="item.needVip===1&&item.num===maxUserCount" class="vip" src="/static/createCircle/vip-light.png"></image>
                            <image v-if="item.needVip===2" class="svip" src="/static/createCircle/svip.png"></image>
                            <image v-if="item.needVip!==2&&item.num===maxUserCount" class="bg" src="/static/createCircle/bg1.png"></image>
                            <image v-if="item.needVip===2&&item.num===maxUserCount" class="s_bg" src="/static/createCircle/s-bg1.png"></image>
                        </view>
                    </view>
                </view>
				<!--
                <view class="box_main" style="margin-top:25rpx;padding-bottom:20rpx;" v-if="!VER.ver">
                    <view class="title_main d-flex a-center">
                        胖友加入您的群是否需要付费？
                    </view>

                    <view class="needPayPicker d-flex">
                        <view class="card d-flex a-center j-center" :class="{active:needPay===0}"  @tap="toPay(0)">
                            <text class="text">免费</text>
                            <image v-if="needPay===0" class="bg" src="/static/createCircle/bg1.png"></image>
                        </view>
                        <view class="card d-flex a-center j-center" :class="{active:needPay===1}"  @tap="toPay(1)">
                            <image v-if="!needPay" class="vip" src="/static/createCircle/vip-dark.png"></image>
                            <image v-if="needPay" class="vip" src="/static/createCircle/vip-light.png"></image>
                            <text class="text">付费</text>
                            <image v-if="needPay===1" class="bg" src="/static/createCircle/bg1.png"></image>
                        </view>
                    </view>

                    
                    <view v-show="needPay" class="pay_input_box d-flex a-center j-center">
                        <view v-if="!pay_inp_focus" class="shadow3" @tap="payInpGetFocus"></view>
                        <input class="pay_inp" :adjust-position="false" :focus="pay_inp_focus_statu" @focus="pay_inp_focus_statu=true" @blur="inpBlur" @input="checkNum" v-model="payAmount" type="number"> 
                        <text class="psr" style="font-size:28rpx;color:#333;margin-left:10rpx;top:8rpx;">元</text>
                    </view>

                </view>
				-->

                <view class="box" style="margin-top: 20rpx" v-if="!groupId">
                    <view class="slim_form">
                        <view class="slim_row" v-if="needPay===0">
                            <view class="left_box">入群需要群主审核</view>
                            <view class="right_box">




                                <tm-switch
                                linear="left"
                                linearDeep="accent"
                                :defaultValue="needAuth"
                                v-model="needAuth"
                                @change="handleNeedAuthChange"
                                color="rgba(15, 95, 70, 0.30)"
                                :barColor="
                                    needAuth
                                        ? 'rgba(35, 226, 166, 1)'
                                        : 'rgba(195, 204, 202, 1)'
                                "
                                barIcon=""
                                size="normal"
                            ></tm-switch>
                            </view>
                        </view>
                        
                        <!-- <view class="slim_row" v-if="needPay===0">
                            <view class="left_box">付费加入无需审核（免费群不可设置）</view>
                            <view class="right_box">
                                
                                <tm-switch :disabled="true" barIcon="" offIcon="" size="normal" color="#23e2a6" :defaultValue="false"
                                    ></tm-switch>
                            </view>
                        </view> -->

                        <view class="slim_row" v-if="needPay===1">
                            <view class="left_box">付费加入无需审核</view>
                            <view class="right_box">
                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="allowAll"
                                    @change="change1"
                                    v-model="allowAll"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        allowAll
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>
                            </view>
                        </view>

                        <!-- <view class="slim_row" v-if="needPay===1">
                            <view class="left_box">入群需要群主审核（收费群不可设置）</view>
                            <view class="right_box">
                                
                                <tm-switch :disabled="true" barIcon="" offIcon="" size="normal" color="#23e2a6" :defaultValue="false"
                                    ></tm-switch>
                            </view>
                        </view> -->
						<!--
                        <view class="slim_row">
                            <view class="left_box">游客模式<image class="ask" src="/static/ask.png"></image>
                            </view>
                            <view class="right_box">

                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="allowVisitor"
                                    v-model="allowVisitor"
                                    @change="handleAllowVisitorChange"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        allowVisitor
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>

                            </view>
                        </view>
						-->
                    </view>
                </view>
            </scroll-view>

            <scroll-view class="scr scr3" :class=[currentStep] :scroll-y="true">

                <view class="box_main" style="margin-top:25rpx;">
                    <view class="title_main d-flex a-center">
                        给群聊取一个响亮的名字并上传头像!
                    </view>

                    <view class="uploadGroupHead d-flex a-center j-center">
                        <view class="headBox d-flex d-c a-center j-center" @tap="select">
                            <image class="add" src="/static/image/record-add2.png" mode="" />
                            <text class="text">上传头像</text>

                            <image class="headimg" :src="circlePhoto" mode="" />

                        </view>
                    </view>

                    <view class="groupName d-flex a-center j-center">
                        <input type="text" :adjust-position="false" placeholderStyle="color:#999;font-size:34rpx;" placeholder="请输入群名称，不超过8个字" class="inp" v-model="circleName" @blur="checkName" @input="checkLength(16)">
                    </view> 

                </view>


                <view class="box_main" style="margin-top:25rpx;">
                    <view class="title_main d-flex a-center">
                       对加入群聊的胖友说点什么？
                    </view>
                    <view class="textarea_box" @tap="textareaGetFocus">
                        <view class="shadowX" v-if="!textareaFocusStatu">
                        </view>
                        <textarea class="textarea_desp" :inputBorder="false"  :adjust-position="false" @input="checkLength1(600)" :focus="textareaFocusStatu" @blur="textareaBlur"
                            placeholderStyle="color:#ccc;font-size:30rpx;" v-model="introduction2"
                            :placeholder="`1、我能给加入群聊的胖友提供什么帮助\n2、对加入群聊的胖友有什么要求`" />
                    </view>
                </view>

            </scroll-view>

            <view class="vip desp w-center d-flex j-center a-center">
                <text class="toVip">成为VIP</text><text v-if="!VER.ver">可创建收费群并</text>开启更多服务功能
            </view>


            <view class="btn_bottom_box">
                <view v-if="currentStep === 'step1'" class="btn_main_r" @tap="nextStep">
                    <text class="text">下一步</text>
                </view>

                <view v-if="currentStep === 'step2'" class="btn_main_r" @tap="nextStep1">
                    <text class="text">下一步</text>
                </view>
                <view v-if="currentStep === 'step3' && groupId" class="btn_main_r" @tap="edit">
                    <text class="text">保存</text>
                </view>

                <view v-if="currentStep === 'step3' && !groupId" class="btn_main_r" @tap="create">
                    <text class="text">创建群</text>
                </view>

                <view class="bottom_seat"></view>
            </view>






            <!-- <tm-button v-if="currentStep === 'step1'" class="btn_main w-center" :width="690" :shadow="0"
                :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="nextStep"
                label="下一步"></tm-button> -->
            <!-- <tm-button v-if="currentStep === 'step2'" class="btn_main w-center" :width="690" :shadow="0"
                :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="nextStep1"
                label="下一步"></tm-button> -->
            <!-- <tm-button v-if="currentStep === 'step3' && groupId" class="btn_main w-center" :width="690" :shadow="0"
                :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="edit"
                label="保存"></tm-button> -->
            <!-- <tm-button v-if="currentStep === 'step3' && !groupId" class="btn_main w-center" :width="690" :shadow="0"
                :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="create"
                label="创建群"></tm-button> -->
            <!-- <tm-overlay v-model:show="dialogVisible" contentAnimation style="border-radius: 20rpx">
                <view @click.stop="" class="sheet">
                    <tm-sheet :width="540" style="border-radius: 20rpx; padding: 0" @tap="dialogVisible = false">
                        <view class="dialog_box">
                            <view class="title">
                                {{ currentService.title }}
                            </view>
                            <scroll-view :scroll-y="true" class="desp">
                                <rich-text :nodes="currentService.detail"></rich-text>
                            </scroll-view>
                            <view v-show="!isBaseService" class="btns d-flex d-c a-center">
                                <view class="btn btn1" @tap="goEditService">编辑</view>
                                <view class="btn btn2" @tap="delService">删除</view>
                            </view>
                        </view>
                    </tm-sheet>
                </view>
            </tm-overlay> -->
        </view>

        <uni-popup ref="timepopup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">时限</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<picker-view indicator-style="height: 100rpx;background: #F5F5F5;z-index: 0;" :value="value" @change="timeLimitPicker" class="picker-view">
						<picker-view-column>
							<view class="item d-flex a-center j-center" v-for="(item,index) in timeArr" :class="{selected:chosenTime===item.val}" :key="item.val">{{item.text}}</view>
						</picker-view-column>
						
					</picker-view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button class="button-button" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="choseTime"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>




        <uni-popup
            ref="servicePopup"
            :safe-area="false"
            type="bottom"
            background-color="transpartent"
        >
            <view class="servicePopup" :class="{newService:showServiceisNew}">
                <view class="shadow"></view>
                <view class="shadow1"></view>
                <view class="content">
                    <view class="title d-flex a-center j-center">
                        <view v-if="showServiceisNew" class="psa h-center left_btn" @tap="showDelService">删除</view>
                        <view class="text">{{currentShowService.title}}</view>
                        <view class="close psa h-center" @tap="closeServicePopup">
                            <image class="img" src="/static/image/close.png" mode="" />
                        </view>
                    </view>
                    <view class="row1 d-flex" v-for="item,index in  currentShowService.detailArr">
                        <view class="index d-flex a-center j-center">{{index+1}}</view>
                        <view class="text">{{item}}</view>
                    </view>

                    <view class="sbtn sbtn1 d-flex a-center j-center" style="margin-top:150rpx" @tap="handleCheckService(currentShowService.id)">
                        {{ service.includes(currentShowService.id)?'取消选择':'选择' }}
                    </view>

                    <view v-if="showServiceisNew" class="sbtn sbtn2 d-flex  a-center j-center" @tap="goEditService">
                        修改
                    </view>
                    <view class="heightBox"></view>
                </view>
            </view>
        </uni-popup>

        <uni-popup
            ref="delServicePopup"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >
            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认删除自定服务?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="delService" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="closeDelServicePopup" class="content-button" style="color: #999999;">取消</view>
		    </view>
            <!-- <view class="popup-content">
                <view class="desp d-flex a-center"
                    >确认删除自定服务?</view
                >
                <view
                    class="row d-flex a-center j-center error"
                    @tap="delService"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="closeDelServicePopup"
                    >取消</view
                >
            </view> -->
        </uni-popup>


        <uni-popup
            ref="goBackPopup"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >

            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认退出{{groupId?'编辑':'创建'}}群?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="navigateBack" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="closeGoBackPopup" class="content-button" style="color: #999999;">取消</view>
		    </view>

            <!-- <view class="popup-content">
                <view class="desp d-flex a-center"
                    >确认退出{{groupId?'编辑':'创建'}}群?</view
                >
                <view
                    class="row d-flex a-center j-center error"
                    @tap="navigateBack"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="closeGoBackPopup"
                    >取消</view
                >
            </view> -->
        </uni-popup>


        <needvip ref="needVipPopup" :title="needVipTitle" :desp="needVipDesp" :btntext="needVipBtnText"></needvip>

        <uni-popup
            ref="toVipPopup"
            background-color="transparent"
        >
            <view class="toVip_content">
                <view class="toVip_box">

                    <view class="top">收费群</view>
                    <view class="desp1">成为{{needVipLevel===1?'VIP':'SVIP'}}，即可创建收费群，获得更多收益。</view>

                    <view class="btn d-flex a-center j-center" @tap="goMemberCenter">
                        开通{{needVipLevel===1?'VIP':'SVIP'}}
                    </view>
                </view>
                <image @tap="toVipPopup.close()" class="close w-center" src="/static/image/guanbi.png" mode="" />
            </view>
        </uni-popup>

        <cropper
            mode="free"
            :width="200"
            :height="200"
            :maxWidth="1024"
            :maxHeight="1024"
            :url="pickedImg"
            @cancel="cancel"
            @ok="complete"
        ></cropper>
    </tm-app>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
} from "vue";
import cropper from "@/components/cropper";
import needvip from "@/components/needvip";
import { onReady, onShow, onLoad, onUnload,onPageScroll} from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getSelectConfig, createCircle, getService, getCircleDetail, groupUpdate,checkCreatedGroup } from "@/api/api";
import { BASE_URL } from "@/api/request";
import { handleJumpToChat } from "@/hooks/imHooks";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { showLoading, closeLoading, wait,uploadFile,checkSwear,replaceSwear } from "@/utils/utils";
import { chooseImage } from "@/utils/utils";
import { ver } from "@/store/ver";
import { imStore } from "@/store/imStore";
const IM_STORE: any = imStore();
const VER = ver();
const systemConfig: any = systemConfigStore();
const userData: any = userDataStore();
const msg: any = ref(null);
const circleName: any = ref("");
const payAmount: any = ref(null);
const maxUserCount: any = ref(10);
const circlePhoto: any = ref(null);
const introduction: Ref<string> = ref("");
const introduction2: Ref<string> = ref("");
const allowVisitor = ref(false);
const needAuth = ref(true);
const currentStep = ref("step1");
const needPay = ref(0);
const currentService = ref({});
const titleText = ref('创建群');
const vipLevel = ref(0);

const textareaFocus = ref(0);
const textareaFocusStatu = ref(0);
const allowAll = ref(true);
const needVipTitle = ref('');
const needVipDesp = ref('');
const needVipBtnText = ref('');
const needVipPopup = ref(null);



const change1 = (bool)=>{
    nextTick(()=>{
        allowAll.value = true;
    })

    uni.showToast({
        icon: "none",
        title: "付费群不可关闭",
        duration: 1500,
    });
}


const goMemberCenter = ()=>{
    toVipPopup.value.close();
    uni.navigateTo({
        url:'/pages/memberCenter/memberCenter'
    })
}


const textareaGetFocus = ()=>{
    textareaFocus.value = true;
    setTimeout(()=>{
        textareaFocusStatu.value = true;
    },300)
}

const textareaBlur = ()=>{
    introduction2.value = replaceSwear(introduction2.value);

    //checkSwear(introduction2.value,true);
    textareaFocus.value = false;
    textareaFocusStatu.value = false;
}


const pickedImg = ref('')


const select = () => {
	if(systemInfo.platform==='android'){
		IM_STORE.setReset(false)
	}
    chooseImage({
        count: 1,
        success: (rst) => {
            // 设置url的值，显示控件
            pickedImg.value = rst.tempFilePaths[0];
        },
    });
};

const checkName = ()=>{
    circleName.value = replaceSwear(circleName.value)
    //checkSwear(circleName.value,true)
}


const complete = async (ev:any) => {
    console.log("complete");
    console.log("complete");
    console.log("complete");
    console.log(ev);
    const result = await uploadFile(ev.path).catch(()=>{
        uni.showToast({
            icon: "none",
            title: "上传图片失败",
        });
    })

    if(result){
		if(result.includes('-small')){
			circlePhoto.value = result.replace('-small', '-big')
		}else{
			const index = result.lastIndexOf('.');
			const name = result.substring(0,index);
			const ext = result.substring(index,result.length);
			circlePhoto.value = `${name}-big${ext}`;
		}
        
		//circlePhoto.value = result
        setTimeout(()=>{
            closeLoading();
            pickedImg.value = "";
        },500)
    }

};

const cancel = () => {
    pickedImg.value = "";
};




const handelScroll = ()=>{
    // try {
    //     uni.hideKeyboard();
    // } catch (error) {
        
    // }
}

onPageScroll(()=>{
    handelScroll();
})

const getClass = (key)=>{
    if(key==1){
        return 'icon-jianzhongshoushen'
    }
    if(key==2){
        return 'icon-jianzhizengji'
    }
    if(key==3){
        return 'icon-yundongjiankang'
    }
    if(key==4){
        return 'icon-jiankangyinshi'
    }
    if(key==5){
        return 'icon-xiuxianyangsheng'
    }
}

const keyboardHeight = ref(0);
const onKeyboardHeightChange = (obj: any) => {
    const { height } = obj;
    keyboardHeight.value = height;
};


const pay_inp_focus= ref(false)
const pay_inp_focus_statu= ref(false)

const payInpGetFocus=()=>{
    pay_inp_focus.value= true;
    setTimeout(()=>{
        pay_inp_focus_statu.value= true;
    },300)
}

const toPay = (num)=>{


    if(num===0){
        payAmount.value = 0;
        needAuth.value = true;
    }


    if(num===1){

        if(userData.isVip<1){
            needVipTitle.value = '收费群'
            needVipDesp.value = '成为VIP，即可创建收费群，获得更多收益。'
            needVipBtnText.value = '开通VIP'
            needVipPopup.value.open();

            return;
        }


        needAuth.value = false;

    }

    
    needPay.value = num;
    nextTick(()=>{
        pay_inp_focus.value = !!num;
        setTimeout(()=>{
            pay_inp_focus_statu.value = !!num;
        },300)
    })
}

const inpBlur = ()=>{
    pay_inp_focus.value = false;
    pay_inp_focus_statu.value = false;
}


const transFormHeight = computed(()=>{

    if(textareaFocus.value){
        return 200;
    }

    if(pay_inp_focus.value){
        return 100;
    }

    return 0;

})


const checkNum = () => {
    let str = payAmount.value + "";
    let str1 = str.replace(".", "");
    let num = Number(str1);
    if (num > 9999) {
        num = 9999;
    }
    nextTick(() => {
        if (num) {
            payAmount.value = num;
        } else {
            payAmount.value = null;
        }
    });
};

const checkLength = (maxLength: number) => {
    let content = circleName.value;
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        circleName.value = str;
    });
};


const checkLength1 = (maxLength: number) => {
    let content = introduction2.value;
    
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        introduction2.value = str;
    });
};

const checkIsLess20 = (s:string) => {
    let content = s;
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }
    }

    if(len<40){
        return true
    }else{
        return false;
    }

}



const handleNeedAuthChange = (bool: boolean) => {
    needAuth.value = bool;
};

const handleAllowVisitorChange = (bool: boolean) => {
    allowVisitor.value = bool;
};

const nnn = (bool: boolean) => {
    console.log(needPay.value);
};

const userCountArr = ref([
    { num:10,needVip:0},
    { num:50,needVip:0},
    { num:200,needVip:0},
    { num:500,needVip:0},
]);
const timepopup = ref(null);
const goBackPopup = ref(null);

const closeGoBackPopup = ()=>{
    goBackPopup.value.close();
}

const closePopup = () => {
	timepopup.value.close()
}


const timeArr = ref([
    {
        val: 3,
        text: "3个月",
    },
    {
        val: 6,
        text: "6个月",
    },
    {
        val: 9,
        text: "9个月",
    },
    {
        val: 12,
        text: "12个月",
    },
    {
        val: 9999,
        text: "不限",
    },
]);

const peopleSelects: any = ref([
    {
        text: "10",
        value: 10,
        disabled: false,
    },
    {
        text: "20",
        value: 20,
        disabled: false,
    },
    {
        text: "30",
        value: 30,
        disabled: false,
    },
    {
        text: "50（会员）",
        value: 50,
        disabled: true,
    },
    {
        text: "100（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "200（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "500（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "1000（会员）",
        value: 50,
        disable: true,
    },
]);
const beforeBack = () => {
    if (currentStep.value === "step2") {
        currentStep.value = "step1";
        return false;
    }

    return true;
};

const needVipLevel = ref(0);

const maxUserCountPicker = (item) => {
	/*
    if(userData.isVip<item.needVip){

        needVipTitle.value = '更多成员数'

        if(item.needVip===1){
            needVipDesp.value = '成为VIP，可创建最多容纳50人群。'
            needVipBtnText.value = '开通VIP'
        }
        if(item.needVip===2){
            needVipDesp.value = '成为SVIP，可创建最多容纳500人群。'
            needVipBtnText.value = '开通SVIP'
        }

        needVipPopup.value.open();

        needVipLevel.value = item.needVip;
        return;
    }
*/
    maxUserCount.value = item.num;
};

const timeLimit = ref(999);
const chosenTime = ref(999);
const chosenTimeText = ref("不限");
const timeLimitText = ref("不限");
const showTimePicker = ()=>{

    if(needPay.value!==1){
        return
    }
    timepopup.value.open("bottom");
}

const timeLimitPicker = (e: any) => {
    const index = e.detail.value;
    chosenTime.value = timeArr.value[index].val;
    chosenTimeText.value = timeArr.value[index].text;
};

const choseTime = ()=>{
    timeLimit.value = chosenTime.value;
    timeLimitText.value = chosenTimeText.value;
    timepopup.value.close();
}



const choseImage = () => {
    chooseImage({
        success: (chooseImageRes) => {
            const token = uni.getStorageSync("api_token");
            const tempFilePaths = chooseImageRes.tempFilePaths;
            console.log("chooseImageRes");
            console.log(chooseImageRes);
            showLoading();
            uni.uploadFile({
                header: {
                    token,
                },
                url: `${BASE_URL}/file/upload`, //仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],
                name: "file",
                formData: {
                    'isCompress':1,
                },
                success: (uploadFileRes) => {
                    closeLoading();
                    let res: any;

                    try {
                        res = JSON.parse(uploadFileRes.data);
                    } catch (error) {
                        uni.showToast({
                            icon: "none",
                            title: "请稍后再试",
                            duration: 1500,
                        });
                        return;
                    }


                    const { flag, data } = res;


                    if (flag !== 1) {
                        uni.showToast({
                            icon: "none",
                            title: "上传失败,请稍后再试",
                            duration: 1500,
                        });
                        return;
                    }

                    const { fileUrl } = data;

                    circlePhoto.value = fileUrl;
                },
                fail() {
                    closeLoading();
                    uni.showToast({
                        icon: "none",
                        title: "上传失败,请稍后再试",
                        duration: 1500,
                    });
                },
            });
        },
    });
};

const systemInfo: any = systemInfoStore();

const service: any = ref(["10000"]);


const currentShowService:any = ref({})



const servicePopup = ref(null);

const showServiceisNew = computed(()=>{
    return !baseService.value.includes(
        currentShowService.value.photo
    )
})


const selectService = (service)=>{

    console.log(selectService)
    console.log(selectService)

    const arr = service.detail.split('&*&*&');
    currentShowService.value=service;

     currentShowService.value.detailArr = arr;


    servicePopup.value.open();
}


const closeServicePopup = ()=>{
    servicePopup.value.close();
}

const handleCheckService = (num: number) => {
    const _index = service.value.findIndex((item: number) => item === num);
    if (_index === -1) {
        service.value.push(num);
    } else {
        if (service.value.length === 1) {
            uni.showToast({
                icon: "none",
                title: "至少提供一种服务",
                duration: 1500,
            });
            return;
        }
        service.value.splice(_index, 1);
    }

    closeServicePopup();


};

const selectedTag = ref("1");

const handleCheckTag = (tag: any) => {
    selectedTag.value = tag.slimKey;
};

const getWarpweft = () => {
    /* #ifdef H5 */
    return { longitude: null, latitude: null };
    // uni.navigateTo({
    //     url: '/pages/discover/discover',
    // });
    /*#endif*/

    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: "wgs84",
            async success(res) {
                console.log("当前位置的经度：" + res.longitude);
                console.log("当前位置的纬度：" + res.latitude);
                resolve({ longitude: res.longitude, latitude: res.latitude });
            },
            fail(err) {
                resolve({ longitude: null, latitude: null });
            },
        });
    });
};

const nextStep = () => {


    if(createdGroup>maxGroupCreate){

        needVipTitle.value = '已达上限'
        if(!userData.isVip){
            needVipDesp.value = '免费用户最多可创建1个群，当前您已创建1个群，成为VIP可创建最多10个群。'
            needVipBtnText.value = '开通VIP'
        }

        if(userData.isVip===1){
            needVipDesp.value = `VIP用户最多可创建10个群，当前您已创建${createdGroup}个群，成为SVIP可创建最多50个群。`
            needVipBtnText.value = '开通VIP'
        }


        if(userData.isVip===2){
            needVipDesp.value = `创建群数量已达50个上限`
            needVipBtnText.value = '知道了'
        }

        needVipPopup.value.open();

        return;
    }



    // if (!circleName.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请输入名称",
    //         duration: 1500,
    //     });
    //     return;
    // }

    // if (!maxUserCount.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请选择成员数",
    //         duration: 1500,
    //     });
    //     return;
    // }

    if (!selectedTag.value) {
        uni.showToast({
            icon: "none",
            title: "请选择群类型",
            duration: 1500,
        });
        return;
    }

    // if (needPay.value === 1) {
    //     if (!payAmount.value) {
    //         uni.showToast({
    //             icon: "none",
    //             title: "请输入金额",
    //             duration: 1500,
    //         });

    //         return;
    //     }
    // }

    if (!service.value.length) {
        uni.showToast({
            icon: "none",
            title: "请选择服务",
            duration: 1500,
        });
        return;
    }

    currentStep.value = "step2";
};

const nextStep1 = () => {



    // if (!circleName.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请输入名称",
    //         duration: 1500,
    //     });
    //     return;
    // }

    if (!maxUserCount.value) {
        uni.showToast({
            icon: "none",
            title: "请选择成员数",
            duration: 1500,
        });
        return;
    }

    // if (!selectedTag.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请选择群类型",
    //         duration: 1500,
    //     });
    //     return;
    // }

    if (needPay.value === 1) {
        if (!payAmount.value) {
            uni.showToast({
                icon: "none",
                title: "请输入金额",
                duration: 1500,
            });

            return;
        }
    }

    // if (!service.value.length) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请选择服务",
    //         duration: 1500,
    //     });
    //     return;
    // }

    currentStep.value = "step3";
};


let createLoading = false;

const create = async () => {
    if(createLoading){
        return;
    }

    createLoading = true;

    const { longitude, latitude }: any = await getWarpweft();
    console.log("longitude");
    console.log(longitude);
    console.log(userData.id);

    if (!circleName.value) {
        uni.showToast({
            icon: "none",
            title: "请输入名称",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }


    circleName.value = replaceSwear(circleName.value);

    // if(!checkSwear(circleName.value)){
    //     uni.showToast({
    //         icon: "none",
    //         title: "群名包含敏感词,请重新输入",
    //         duration: 1500,
    //     });
    //     createLoading = false;
    //     closeLoading();
    //     return
    // }



    if (!maxUserCount.value) {
        uni.showToast({
            icon: "none",
            title: "请选择成员数",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }

    if (!selectedTag.value) {
        uni.showToast({
            icon: "none",
            title: "请选择群类型",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }



    if (!introduction2.value) {
        uni.showToast({
            icon: "none",
            title: "请输入成员要求",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }


    introduction2.value = replaceSwear(introduction2.value);

    // if(!checkSwear(introduction2.value)){
    //     uni.showToast({
    //         icon: "none",
    //         title: "成员要求包含敏感词,请重新输入",
    //         duration: 1500,
    //     });
    //     createLoading = false;
    //     closeLoading();
    //     return
    // }
	/*
    if(checkIsLess20(introduction2.value)){
        uni.showToast({
            icon: "none",
            title: "成员要求至少20字",
            duration: 2000,
        });
        createLoading = false;
        closeLoading();
        return
    }
	*/
    // if (!introduction2.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请输入成员要求",
    //         duration: 1500,
    //     });
    //     closeLoading();
    //     return;
    // }

    if (!circlePhoto.value) {
        uni.showToast({
            icon: "none",
            title: "请上传群头像",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }

    if (!service.value.length) {
        uni.showToast({
            icon: "none",
            title: "请选择服务",
            duration: 1500,
        });
        createLoading = false;
        closeLoading();
        return;
    }


    const userGroupItemss = service.value.map((id: any) => {
        const obj = systemService.value.find((item: any) => item.id === id);
        return obj;
    });

    console.log("groupServiceParams");
    console.log(userGroupItemss);

    const params = {
        name: circleName.value,
        maxUserCount: maxUserCount.value,
        payAmount: payAmount.value ? payAmount.value*100 : 0,
        longitude,
        latitude,
        introduction: introduction.value,
        introduction2: introduction2.value,
        photo: circlePhoto.value,
        userId: userData.id,
        notice: "",
        labels: [selectedTag.value],
        isVisitor: allowVisitor.value ? 1 : 0,
        expiry: timeLimit.value,
        joinOption: needAuth.value ? "NeedPermission" : "FreeAccess",
        userGroupItemss,
    };

    if(needPay.value===1&&payAmount.value){
        params.joinOption = "FreeAccess"
    }

    showLoading();

    const res: any = await createCircle(params).catch(()=>{
        createLoading = false;
    });

    const { flag, data,message } = res;
    closeLoading();
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: message||"创建群失败，请稍后再试",
            duration: 1500,
        });
        createLoading = false;
        return;
    }

    const { groupId: groupID } = data;
    if (groupID) {
        console.log("groupID");
        console.log(groupID);
        const conversationId = `GROUP${groupID}`;
        // const pages = getCurrentPages();
        // const length = pages.length;
        // const parentView = pages[length - 1].$getAppWebview();


        uni.redirectTo({
            url:`/pages/quanzi/createSuccess?groupID=${groupID}`,
        });


        // await handleJumpToChat(conversationId).catch((err) => {
        //     uni.showToast({
        //         icon: "none",
        //         title: "跳转失败",
        //         duration: 1500,
        //     });
        // });

        //createLoading = false;

   

       closeLoading();
    }
};

const goBack = () => {

    if (currentStep.value === "step2") {
        currentStep.value = "step1";
        return false;
    }

    if (currentStep.value === "step3") {
        currentStep.value = "step2";
        return false;
    }


    goBackPopup.value.open();
};


const navigateBack = ()=>{
    uni.navigateBack();
}

const edit = async () => {
    showLoading();
    //const { longitude, latitude }: any = await getWarpweft();

    if (!circleName.value) {
        uni.showToast({
            icon: "none",
            title: "请输入名称",
            duration: 1500,
        });
        closeLoading();
        return;
    }


    circleName.value = replaceSwear(circleName.value);

    // if(!checkSwear(circleName.value)){
    //     uni.showToast({
    //         icon: "none",
    //         title: "群名包含敏感词,请重新输入",
    //         duration: 1500,
    //     });
    //     createLoading = false;
    //     closeLoading();
    //     return
    // }

    if (!maxUserCount.value) {
        uni.showToast({
            icon: "none",
            title: "请选择成员数",
            duration: 1500,
        });
        closeLoading();
        return;
    }

    if (!selectedTag.value) {
        uni.showToast({
            icon: "none",
            title: "请选择群类型",
            duration: 1500,
        });
        closeLoading();
        return;
    }

    if (!introduction2.value) {
        uni.showToast({
            icon: "none",
            title: "请输入成员要求",
            duration: 1500,
        });
        closeLoading();
        return;
    }


    introduction2.value = replaceSwear(introduction2.value);

    // if(!checkSwear(introduction2.value)){
    //     uni.showToast({
    //         icon: "none",
    //         title: "成员要求包含敏感词,请重新输入",
    //         duration: 1500,
    //     });
    //     createLoading = false;
    //     closeLoading();
    //     return
    // }
	/*
    if(checkIsLess20(introduction2.value)){
        uni.showToast({
            icon: "none",
            title: "成员要求至少20字",
            duration: 2000,
        });
        createLoading = false;
        closeLoading();
        return
    }
	*/


    // if (!introduction2.value) {
    //     uni.showToast({
    //         icon: "none",
    //         title: "请输入成员要求",
    //         duration: 1500,
    //     });
    //     closeLoading();
    //     return;
    // }

    if (!circlePhoto.value) {
        uni.showToast({
            icon: "none",
            title: "请上传群头像",
            duration: 1500,
        });
        closeLoading();
        return;
    }

    if (!service.value.length) {
        uni.showToast({
            icon: "none",
            title: "请选择服务",
            duration: 1500,
        });
        closeLoading();
        return;
    }

    const userGroupItemss = service.value.map((id: string) => {
        const obj = systemService.value.find((item: any) => item.id === id);
        return obj;
    });

    console.log("groupServiceParams");
    console.log(userGroupItemss);

    const params = {
        groupId: groupId.value,
        name: circleName.value,
        maxUserCount: maxUserCount.value,
        payAmount: payAmount.value ? payAmount.value*100 : 0,
        introduction: introduction.value,
        introduction2: introduction2.value,
        photo: circlePhoto.value,
        labels: [selectedTag.value],
        expiry: timeLimit.value,
        userGroupItemss,
        joinOption: needAuth.value ? "NeedPermission" : "FreeAccess",
    };



    for (let key in oldParams) {
        const newValue = JSON.stringify(params[key]);
        const oldValue = JSON.stringify(oldParams[key]);
        if (newValue === oldValue) {
            delete params[key];
        }
    }

    const res: any = await groupUpdate(params);
    const { flag, data } = res;
    closeLoading();
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "修改群失败，请稍后再试",
            duration: 1500,
        });

        return;
    }


    setTimeout(()=>{
        uni.navigateBack({success(){
            uni.showToast({
                icon: "none",
                title: "已保存",
                duration: 1500,
            });
        }});
    },100)


    // setTimeout(()=>{
    //     goBack();
    // },1500);



    // const { groupId: groupID } = data;
    // if (groupID) {
    //     console.log("groupID");
    //     console.log(groupID);
    //     const conversationId = `GROUP${groupID}`;
    //     await handleJumpToChat(conversationId, "reLaunch").catch((err) => {
    //         uni.showToast({
    //             icon: "none",
    //             title: "跳转失败",
    //             duration: 1500,
    //         });
    //     });
    //     uni.hideLoading();
    // }
};

watch(needPay, (newVal: number, oldVal: number) => {
    if (newVal === 1) {
        timeLimitText.value = "3个月";
        timeLimit.value = 3;
        chosenTimeText.value = "3个月";
        chosenTime.value = 3;
    } else {
        timeLimitText.value = "不限";
        timeLimit.value = 999;
        chosenTimeText.value = "不限";
        chosenTime.value = 999;
    }
});

const systemService: any = ref([]);
const baseService: any = ref(["10000", "10001", "10002", "10003"]);
const dialogVisible = ref(false);

const isBaseService = computed(() => {
    return baseService.value.some((item) => item === currentService.value.photo);
});

const showService = (service: any) => {
    service.detail = service.detail.replace(/\n/g, " <br/>");
    currentService.value = service;
    dialogVisible.value = true;
};

const goAddService = () => {

    


    if(userData.isVip<1){
        needVipBtnText.value = '开通VIP'
        needVipTitle.value = '自定义服务内容'
        needVipDesp.value = '成为VIP，即可定制个性化服务内容和图标。'
        needVipPopup.value.open();
        return;
    }


    if(systemService.value.length>=12){
        uni.showToast({
            icon: "none",
            title: "最多添加8个服务",
            duration: 1500,
        });
        return;
    }

    uni.navigateTo({
        url: `/pages/quanzi/addService`,
    });
};

const delServicePopup=ref(null);

const showDelService = ()=>{
    delServicePopup.value.open();
}

const closeDelServicePopup = ()=>{
    delServicePopup.value.close();
}

const delService = () => {
    const index1 = service.value.findIndex(item => item === currentShowService.value.id);
    console.log(service.value)
    if (index1 !== -1) {
        service.value.splice(index1, 1);
    }
    const index2 = systemService.value.findIndex(item => item.id === currentShowService.value.id);
    if (index2 !== -1) {
        systemService.value.splice(index2, 1);
    }

    closeDelServicePopup();
    setTimeout(()=>{
        servicePopup.value.close();
    },300)

}

const goEditService = () => {

    uni.setStorageSync('editService', JSON.stringify(currentShowService.value))

    closeServicePopup();

    uni.navigateTo({
        url: `/pages/quanzi/addService?type=edit`,
    });
}

onReady(() => { });

const handleAddService = (item: any) => {
    if(systemService.value.length>=12){
        uni.showToast({
            icon: "none",
            title: "最多添加8个服务",
            duration: 1500,
        });
        return
    }

    systemService.value.push(item);
    nextTick(() => {
        service.value.push(item.id);
    });
};

const handleEditService = (item: any) => {
    systemService.value.forEach((service: any) => {
        if (item.id === service.id) {
            service.detail = item.detail
            service.photo = item.photo
            service.title = item.title
        }
    })
};

let oldParams = {};


const getDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    console.log("getDetail");
    console.log(res);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群资料失败",
            duration: 1500,
        });
        return;
    }




    circleName.value = data.name;
    maxUserCount.value = data.maxUserCount;
    needPay.value = data.payAmount ? 1 : 0;
    payAmount.value = data.payAmount ? data.payAmount/100:0;
    timeLimit.value = data.expiry;


    systemService.value = [...systemService.value, ...data.userGroupItemss.filter(item => !baseService.value.includes(item.id))];
    selectedTag.value = data.label;
    circlePhoto.value = data.photo;
    introduction.value = data.introduction;
    introduction2.value = data.introduction2;



    oldParams = JSON.parse(JSON.stringify({
        name: circleName.value,
        maxUserCount: maxUserCount.value,
        payAmount: payAmount.value ? payAmount.value : 0,
        introduction: introduction.value,
        introduction2: introduction2.value,
        photo: circlePhoto.value,
        labels: [selectedTag.value],
        expiry: timeLimit.value,
    }));


    nextTick(() => {
        timeLimitText.value = data.expiry === 999 ? '不限' : `${data.expiry}个月`;
        service.value = data.userGroupItemss.map(item => item.id);
    })



    // data.introduction = data.introduction.replace(/\n/g, " <br/>");
    // data.introduction2 = data.introduction2.replace(/\n/g, "<br/>");

};

const toVipPopup = ref(null);


const groupId = ref('')

const isCreateGroupSuccess = ref(false);

const createGroupSuccess = ()=>{
    isCreateGroupSuccess.value = true;
}

let createdGroup = 0;
let maxGroupCreate = 0;




onShow((option: any) => {

    //CheckCreatedGroup();

    if(isCreateGroupSuccess.value){
        setTimeout(()=>{
            goBack();
        },500)
    }
    
});

/*
const CheckCreatedGroup = async()=>{
    const res = await checkCreatedGroup({userId:userData.id})
    const { flag,data}=res;

    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "获取用户已创建群数失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    const {havaCount,maxCount} = data;

    createdGroup = havaCount;
    maxGroupCreate = maxCount;

    if(createdGroup>maxGroupCreate){
        needVipTitle.value = '已达上限'
        if(!userData.isVip){
            needVipDesp.value = '免费用户最多可创建1个群，当前您已创建1个群，成为VIP可创建最多10个群。'
            needVipBtnText.value = '开通VIP'
        }
        if(userData.isVip===1){
            needVipDesp.value = `VIP用户最多可创建10个群，当前您已创建${createdGroup}个群，成为SVIP可创建最多50个群。`
            needVipBtnText.value = '开通VIP'
        }


        if(userData.isVip===2){
            needVipDesp.value = `创建群数量已达50个上限`
            needVipBtnText.value = '知道了'
        }

        needVipPopup.value.open();
    }

}
*/


onLoad(async (option: any) => {
	
	console.log(systemConfig.groupTag)

    uni.$on('createGroupSuccess',createGroupSuccess);

    const res: any = await getService({ userId: "system" });
    const { flag, data } = res;
    if (flag === 1) {
        systemService.value = data.list;
        console.log(systemService.value);
    }

    if (option.groupId) {
        titleText.value = '编辑群 ';
        groupId.value = option.groupId;
        getDetail(option.groupId);

    }

    uni.$on("addService", handleAddService);
    uni.$on("editService", handleEditService);
    /* #ifndef H5 */
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
    /*#endif*/
});

onUnload(() => {
    uni.$off("addService", handleAddService);
    uni.$off("editService", handleEditService);
    uni.$off('createGroupSuccess',createGroupSuccess);
    /* #ifndef H5 */
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
    /*#endif*/
});
</script>

<style lang="scss" scoped>

.needChangeBg{
    transition:all linear .3s;
    background:transparent !important;
    &.active{
        background:#23e2a6 !important;
    }
}

.stepText{
    font-size:30rpx;
    color:#333;
    font-weight:400;
}



.sheet {
    border-radius: 20rpx;
    overflow: hidden;
    padding: 0 40rpx;

    .dialog_box {
        width: 100%;
        background: linear-gradient(0, #ffffff 0%, #baf3da 100%, #cbf7e4 100%);
        color: #333333;
        padding: 30rpx 0;
        // border-top-left-radius: 20rpx;
        // border-top-right-radius: 20rpx;
        border-radius: 20rpx;

        .title {
            font-weight: 600;
            font-size: 32rpx;
            color: $slim-text3;
            text-align: center;
        }

        .desp {
            margin-top: 40rpx;
            padding: 0 30rpx;
            height: 440rpx;
            font-size: 28rpx;
        }

        .btns {
            margin-top: 20rpx;
            gap: 20rpx;

            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;
            }

            .btn1 {
                width: 460rpx;
                height: 80rpx;
                background: linear-gradient(120deg, #29dba3 0%, #64f1c5 100%);
                border-radius: 40rpx;
                color: #fff;
            }

            .btn2 {
                width: 460rpx;
                height: 80rpx;
                border-radius: 40rpx;
                border: 1px solid #cccccc;
                color: #999;
            }
        }
    }
}
</style>

<style lang="scss" scoped>

.toVip_content{
    position:relative;
    width:540rpx;
    .shadow1{
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        width:540rpx;
        background: linear-gradient(to bottom,#CBF6E3,#FFFFFF);
    }

    .toVip_box{
        position: relative;
        width:540rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background:#fff;
        padding-bottom:40rpx;
        .top {
            width: 100%;
            height: 124rpx;
            background: linear-gradient(0, #ffffff 0%, #baf3da 100%, #cbf7e4 100%);
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #333333;
            text-align: center;
            padding-top: 29rpx;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
        }

        .desp1{
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
            padding: 0 40rpx;
            line-height: 50rpx;
            text-align:left;
        }

        
    }

    .desp{
        position: relative;
        z-index:10;
        font-size:28rpx;
        color:#333;
        padding: 0 40rpx;
    }
    .btn{
        width: 460rpx;
        height: 80rpx;
        background: linear-gradient(120deg, #29dba3 0%, #64f1c5 100%);
        border-radius: 20rpx;
        color:#fff;
        z-index:10;
        margin:0 auto;
        margin-top:50rpx;
        &:active{
            opacity: .7;
        }
    }

    .close{
        width:52rpx;
        height:52rpx;
        bottom:-112rpx;
    }


}


.slim_form {
    border-radius: 20rpx;
    overflow: hidden;

    .slim_row {
        width: 100%;
        height: 80rpx;
        padding: 0 30rpx;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.needActive:active {
            background-color: #f5f5f5;
            opacity: 0.8;
        }

        .left_box {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: $slim-text3;
        }

        .right_box {
            display: flex;
            align-items: center;
            color: $slim-text3;

            .inp {
                width: 350rpx;
                font-size: 30rpx;
                text-align: right;
                height: 100%;
            }

            .more {
                color: #ccc;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }
    }
}

.bottom-popup{
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.popup-title{
			height: 100rpx;
			border-bottom: 1rpx solid #E4E4E4;
			.title-text{
				position:absolute;
				top:34rpx;
				left:50rpx;
				height: 32rpx;
				width: 234rpx;
			}
			.title-icon{
				position:absolute;
				top:32rpx;
				right: 30rpx;
				
				width: 36rpx;
				height: 36rpx;
			}
		}
		.popup-show{
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx 0 30rpx;
			.show-text{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.popup-row{
			padding-bottom: 16rpx;
			.picker-view {
				height: 350rpx;
				margin-top: 20rpx;
			}
			
			.item {
				line-height: 70rpx;
				text-align: center; 
				
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
                &.selected{
                    color:#1dc691;
                    font-size:40rpx;
                }
				
			}
			
		}
		.popup-button{
			.button-button{
				border-radius: 45rpx;
			}
		}
	}

.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;


    .topBg{
        width:750rpx;
        height: 555rpx;
        background: linear-gradient(27deg, #D6F6FC 0%, #EAFCE1 59%, #B2FACD 100%);
    }

    .ask {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
    }

    .content1 {
        position: absolute;
        width:750rpx;
        z-index:10;
        left: 0;
        right: 0;
        bottom: 0;
        overflow:hidden;
        transition: all ease .3s;
    }

    .scr {
        position: absolute;
        top:120rpx;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom) + 200rpx);
        bottom: calc(env(safe-area-inset-bottom) + 200rpx);
        transition: all linear 0.25s;

        &.step1.scr1 {
            transform: translateX(0);
        }
        &.step2.scr1 {
            transform: translateX(-100%);
        }
        &.step3.scr1 {
            transform: translateX(-200%);
        }

        &.step1.scr2 {
            transform: translateX(100%);
        }
        &.step2.scr2 {
            transform: translateX(0);
        }
        &.step3.scr2 {
            transform: translateX(-100%);
        }

        &.step1.scr3 {
            transform: translateX(200%);
        }
        &.step2.scr3 {
            transform: translateX(100%);
        }
        &.step3.scr3 {
            transform: translateX(0);
        }



    }

    .step_box {
        position: fixed;
        width: 100%;
        height: 120rpx;
        
        .step {
            gap: 10rpx;
            .dot {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                font-size: 24rpx;
                background: rgba(255, 255, 255, 0.3);
                border: 2rpx solid #fff;
                color: #D2E1D7;
                box-shadow: 0px 2px 6px 0px rgba(26,120,90,0.2);
            }

            .text {
                font-size: 24rpx;
                color: #999;
            }

            &.step1 {
                margin-right:-28rpx;
            }

            &.step2 {
                margin-left:-28rpx;
                margin-right:-28rpx;
            }

            &.step3 {
                margin-left:-28rpx;
            }

            &.active {
                .dot {
                    background: #23e2a6;
                    color:#fff;
                }

                .text {
                    color: #1DC691;
                }
            }
        }

        .line {
            position: relative;
            width: 162rpx;
            height: 4rpx;
            background: #fff;
            border-radius: 6rpx;
            top: -20rpx;

            &.active {
                background: #23e2a6;
            }
        }
    }

    .box {
        width: 710rpx;
        margin: 0 auto;
        border-radius: 20rpx;
        background: #fff;

        .title {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            height: 80rpx;
            padding: 0 30rpx;
            margin-bottom: 24rpx;
        }

        // .service {
        //     width: 100%;
        //     padding: 0 25rpx;
        //     padding-bottom: 20rpx;
        //     gap: 20rpx;

        //     .card {
        //         position: relative;
        //         width: 150rpx;
        //         &.checked {
        //             .rect {
        //                 background: url('/static/createCircle/bg2.png') no-repeat;
        //                 background-size:100% 100%;


        //                 &.newService {
        //                     background: url('/static/createCircle/bg3.png') no-repeat;
        //                 }
        //             }
        //         }

        //         .rect {
        //             width: 150rpx;
        //             height: 150rpx;
        //             border-radius: 10rpx;
        //             background: #f6f6f6;

        //             &.add{
        //                 background: rgba(226,123,35,0.1);
        //             }

        //             .img {
        //                 width: 100%;
        //                 height: 100%;
        //             }
        //         }

        //         .text {
        //             margin-top: 5rpx;
        //             font-size: 24rpx;
        //             color: #666;
        //         }
        //     }
        // }

        .tags {
            width: 100%;
            padding: 0 30rpx;
            padding-bottom: 24rpx;
            gap: 24rpx;

            .check_tag {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200rpx;
                height: 60rpx;
                font-size: 28rpx;
                border-radius: 35rpx;
                color: $slim-text3;
                border: 1px solid #ccc;

                .tmicon {
                    font-size: 28rpx;
                    margin-right: 5rpx;

                    &.tmicon-ios-star {
                        font-size: 24rpx;
                    }
                }

                &.checked {
                    color: #fff;
                    background: $slim-main;
                    border: none;
                }
            }
        }

        .photo {
            .img_content {
                width: 400rpx;
                height: 400rpx;
                border: 1px dotted #ddd;
                margin: 0 auto;
                margin-top: 20rpx;
                border-radius: 20rpx;
                color: #ddd;
                font-size: 28rpx;
                margin-top: 20rpx;
                overflow: hidden;

                .tmicon {
                    color: #ddd;
                    font-size: 100rpx;
                }

                .img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .img_view {
            width: 670rpx;
            height: 670rpx;
            border: 1px dashed #ccc;
            margin: 0 auto;

            .upload {
                font-size: 200rpx;
                color: #ccc;
            }

            .img {
                width: 670rpx;
                height: 670rpx;
            }
        }
    }

    .row {
        width: 100%;
        height: 100rpx;
        font-size: 30rpx;

        .pre {
            width: 200rpx;
            height: 100%;
            justify-content: center;
        }

        .inp_box {
            width: 470rpx;
            height: 100%;
            padding-right: 20rpx;

            .inp {
                width: 100%;
            }
        }
    }

    .desp {
        color: #999;
        font-size: 28rpx;
        height: 80rpx;

        .toVip {
            color: #23e2a6;
        }
    }

    .vip {
        position: fixed;
        width: 100%;
        bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
        bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    }

    .btn_main {
        position: fixed;
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));
        z-index: 100;
    }

    .btn1 {
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
    }
}


.newCircle{
    .box_main{
        width:710rpx;
        margin:0 auto;
        border-radius: 10rpx;
        background:#fff;
        padding-bottom:20rpx;
    }

    .tags{
        padding:0 25rpx;
        gap:20rpx;
        .check_tag{
            position:relative;
            width: 320rpx;
            height: 100rpx;
            background: rgba(72,207,165,0.1);
            border-radius: 10rpx;
            overflow:hidden;
            .text{
                position: relative;
                z-index: 10;
                font-size:30rpx;
            }
            .icon{
                position: relative;
                z-index: 10;
                font-size:32rpx;
                margin-right:15rpx;
            }
            .selectedBg{
                position: absolute;
                top:0;
                left:0;
                width: 320rpx;
                height: 100rpx;
                
            }

            &.checked{
                color:#fff;
            }
        }
    }

    .service {
            width: 100%;
            padding: 0 25rpx;
            padding-bottom: 20rpx;
            gap: 20rpx;

            .card {
                position: relative;
                width: 150rpx;
                &.checked {
                    .rect {
                        background: url('/static/createCircle/bg2.png') no-repeat;
                        background-size:100% 100%;


                        &.newService {
                            background: url('/static/createCircle/bg3.png') no-repeat;
                            background-size:100% 100%;
                        }
                    }
                }

                .rect {
                    width: 150rpx;
                    height: 150rpx;
                    border-radius: 10rpx;
                    background: rgba(35,226,166,0.1);
                    &.newService{
                        background: rgba(226,123,35,0.1);
                    }
                    &.add{
                        background: rgba(226,123,35,0.1);
                        
                    }

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    width:100%;
                    height:35rpx;
                    margin-top: 5rpx;
                    font-size: 24rpx;
                    color: #666;
                    text-align: center;
                    height:70rpx;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                    // lines:2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    &.newServiceText{
                        height:70rpx;
                    }
                }
            }
        }

    .title_main{
        width:100%;
        background: #ECFAF6;
        border-radius: 10rpx;
        border: 6rpx solid #FFFFFF;
        font-size:32rpx;
        color:#333;
        font-weight:600;
        padding:27rpx 27rpx;
    }


    .userNumPicker{
        width:100%;
        flex-wrap: wrap;
        gap:15rpx;
        padding:0 25rpx;
        overflow: hidden;
        margin-top:25rpx;
        .card{
            position:relative;
            width:320rpx;
            height:100rpx;
            border-radius: 10rpx;
            background:rgba(72, 207, 165, .1);
            color:#333;
            font-size:30rpx;
            font-weight:600;
            .text{
                position:relative;
                z-index:20;
                .num{
                    font-size:34rpx;
                }
                .ren{
                    position:relative;
                    top:-2rpx;
                    margin-left:5rpx;
                    font-size:22rpx;
                }
                
            }
            .vip{
                position:absolute;
                z-index:10;
                top:6rpx;
                left:13rpx;
                width:36rpx;
                height:14rpx;
                color:rgba(153, 153, 153, 1);

            }
            .svip{
                position:absolute;
                z-index:10;
                width:48rpx;
                height:14rpx;
                top:6rpx;
                left:13rpx;
                color:rgba(153, 153, 153, 1);

            }

            .bg{
                position:absolute;
                width:320rpx;
                 height:100rpx;
                top:0;
                left:0;
            }

            .s_bg{
                position:absolute;
                top:0;
                left:0;
                width:320rpx;
                height:100rpx;
            }

            &.active{
                color:#fff;
            }

        }

    }
    .needPayPicker{
        width:100%;
        gap:20rpx;
        padding:0 25rpx;
        overflow: hidden;
        margin-top:25rpx;
        .card{
            position:relative;
            width:320rpx;
            height:100rpx;
             border-radius: 10rpx;
            background:rgba(72, 207, 165, .1);
            color:#333;
            font-size:30rpx;
            font-weight:600;
            &.active{
                color:#fff;
                background: linear-gradient(324deg, #00DBBA 0%, #00DBBA 100%);
            }

            .bg{
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                width:320rpx;
                height:100rpx;
                z-index:1;
            }
            .text{
                position:relative;
                z-index:10;
            }
            .vip{
                position:absolute;
                z-index:10;
                top:6rpx;
                left:13rpx;
                width:36rpx;
                height:14rpx;
                color:rgba(153, 153, 153, 1);

            }

        }

    }

    .pay_input_box{
        position: relative;
        width:200rpx;
        height:80rpx;
        margin:20rpx auto;
        .shadow3{
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index: 10;
        }
        
        .pay_inp{
            width:180rpx;
            font-family: 'din',DINAlternate-Bold, DINAlternate;
            font-size:60rpx;
            font-weight:600;
            text-align:center;
            color: #1DC691;
            line-height:40rpx;
            border-bottom:2rpx solid #1DC691;
        }
    }

    .uploadGroupHead{
        width:710rpx;
        height:180rpx;
        .headBox{
            position:relative;
            width:140rpx;
            height:140rpx;
            border-radius: 50%;
            border:3rpx solid #fff;
            background:#f5f5f5;
            box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
            .add{
                width:45rpx;
                height:45rpx;
            }
            .text{
                color:#1DC691;
                font-size:24rpx;
            }

            .headimg{
                position:absolute;
                top:0;
                left:0;
                width:134rpx;
                height:134rpx;
                border-radius:50%;
            }

        }
        
    }

    .groupName{
        width:710rpx;
        margin:20rpx 0;
        .inp{
            width: 600rpx;
            height: 100rpx;
            border-radius: 10rpx;
            border: 2rpx solid rgba(29,198,145,0.5);
            padding:0 20rpx;
            font-size:34rpx;
            color:#1DC691;
            font-weight:600;
            text-align: center;
        }
    }

    .textarea_box{
        position:relative;
        width:670rpx;
        margin:0 auto;
        margin-top:10rpx;
        height:260rpx;
        margin-bottom:20rpx;
        .shadowX{
            position: absolute;
            z-index: 10;
            top:0;
            left:0;
            bottom:0;
            right:0;
            padding:10rpx 20rpx;
        }
        .textarea_desp{
            width:670rpx;
            height:260rpx;
            background:#f5f5f5;
            padding:10rpx 20rpx;
            font-size:30rpx;
        }
    }

}


.servicePopup{
    position:relative;
    width:750rpx;
    overflow:hidden;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    background:#fff;
    min-height:700rpx;
    .heightBox{
        width:750rpx;
        min-height:20rpx;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
    }

    &.newService{
        .shadow{
            background: linear-gradient(27deg, #FCE2D6 0%, #FFF5E9 59%, #FDDEC0 100%);
        }

        .content{
            .title{
                .left_btn{
                    color:#F19945;
                }
                .close{
                }
            }
            .row1{
                .index{
                    background:#F19945;
                }
            }

            .sbtn1{
                background: linear-gradient(318deg, #FFAF67 0%, #E48E41 100%);
            }

            .sbtn2{
                color:#F19945;
                border: 2rpx solid #FFAF67;
            }
        }
    }

    .shadow{
        position: absolute;
        top:0;
        left:0;
        width:750rpx;
        height:555rpx;
        background: linear-gradient(27deg, #D6F6FC 0%, #EAFCE1 59%, #B2FACD 100%);
    }
    .shadow1{
        position: absolute;
        top:155rpx;
        left:0;
        width:750rpx;
        height:500rpx;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    }
    .content{
        position:relative;
        z-index:10;
        width:750rpx;
        padding-top:40rpx;
        .title{
            position:relative;
            width:750rpx;
            height:50rpx;
            padding:0 40rpx;
            margin-bottom:70rpx;
            .left_btn{
                font-size: 30rpx;
                font-weight: 400;
                color: #1DC691;
                left:40rpx;
            }
            .close{
                right:40rpx;
            }
            .text{
                font-size: 34rpx;
                font-weight: 600;
                color: #333333;
            }

            .img{
                width:36rpx;
                height:36rpx;
            }
        }

        .row1{
            width:750rpx;
            padding:0 50rpx;
            margin-bottom:44rpx;
            .index{
                width:48rpx;
                height:48rpx;
                border-radius: 24rpx;
                background:#1DC691;
                color:#fff;
                font-weight: 600;
                font-size:28rpx;
                font-family: 'din',DINAlternate-Bold, DINAlternate;
            }
            .text{
                width:570rpx;
                margin-left:20rpx;
                font-size:28rpx;
                color:#333;
                line-height: 40rpx;
            }
        }

        .sbtn{
            width: 690rpx;
            height: 80rpx;
            margin:0 auto;
            border-radius: 20rpx;
            font-size:32rpx;
            font-weight:600;
        }

        .sbtn1{
            background: linear-gradient(318deg, #64F1C5 0%, #29DBA3 100%);
            color:#fff;
            margin-bottom:0;
        }
        .sbtn2{
            border: 2rpx solid #1DC691;
            color:#1DC691;
            margin-bottom:20rpx;
        }
    }

}

.uni-easyinput__content {
    background-color: #f5f5f5 !important;
    padding: 0 20rpx;
}

.uni-textarea-textarea {
    font-size: 30rpx !important;
    color: $slim-text3;
}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
    color: #1dc691 !important;
}

.uni-picker-container .uni-picker-item {
    color: #1dc691 !important;
}
</style>
